<template>
  <div class="device-box">
    <div class="select-d">
      <div class="searchInp">
        <el-input placeholder="请输入查询关键字" v-model="searchData">
        </el-input>
        <el-button class="but" type="goon" icon="el-icon-search"></el-button>
      </div>
    </div>
    <div class="table">
      <el-table :data="tableData">
        <el-table-column
          prop="name"
          label="设备号码"
          min-width="280"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="status"
          label="设备名称"
          min-width="150"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          label="设备类型"
          min-width="150"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          label="IP地址"
          min-width="150"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          label="设备状态"
          min-width="150"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="" label="功能操作" width="250" align="center">
          <el-button
            v-on:click.native.prevent="detail()"
            size="small"
            icon="iconfont icon-chakan"
            type="iDetial"
          >
          </el-button>
          <el-button
            v-on:click.native.prevent="detail()"
            size="small"
            icon="iconfont icon-zhongqi_huabanfuben"
            type="iQidong"
          >
          </el-button>
          <el-button
            v-on:click.native.prevent="detail()"
            size="small"
            icon="iconfont icon-tingzhi"
            type="iStop"
          >
          </el-button>
          <el-button
            v-on:click.native.prevent="detail()"
            size="small"
            icon="iconfont icon-xiangqing1"
            type="iAduit"
          >
          </el-button>
          <el-button
            v-on:click.native.prevent="detail()"
            size="small"
            icon="iconfont icon-xitongshezhi-xitongrizhi"
            type="iRizhi"
          >
          </el-button>
        </el-table-column>
      </el-table>
    </div>
    <!-- 详情 -->
    <el-dialog
      title="查看设备"
      :visible.sync="equipDetail"
      width="12rem"
      top="15vh"
      custom-class="equipDialog"
    >
      <div class="content">
        <div class="wrap1">
          <span>设备名称</span><input type="text" v-model="equipName" />
        </div>
        <div class="wrap2">
          <span>设备类型</span><input type="text" v-model="equipType" />
          <span class="ip">IP地址</span
          ><input type="text" v-model="ipAddress" />
        </div>
        <div class="equipTable">
          <el-table :data="equipData" style="width: 100%">
            <el-table-column
              prop="date"
              label="IP地址"
              width="180"
              align="center"
              header-align="center"
            >
            </el-table-column>
            <el-table-column
              prop="name"
              label="端口号"
              width="180"
              align="center"
              header-align="center"
            >
            </el-table-column>
            <el-table-column
              prop="address"
              label="总进程数"
              align="center"
              header-align="center"
            >
            </el-table-column>
            <el-table-column
              prop="address"
              label="已用进程数"
              align="center"
              header-align="center"
            >
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div slot="footer" class="dialog-footer"></div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "DeviceManagement", //设备管理
  data() {
    return {
      //列表数据
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          status: "在线",
          address: "上海市普陀",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          status: "在线",
          address: "上海市普",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          status: "在线",
          address: "上海市普陀",
        },
      ],
      searchData: "",
      equipDetail: false,
      equipName: "WT138", //设备名称
      equipType: "媒体服务处理器", //设备类型
      ipAddress: "10.1.54.138", //IP地址
      equipData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          status: "在线",
          address: "上海市普陀",
        },
      ],
    };
  },
  methods: {
    detail() {
      this.equipDetail = true;
    },
  },
};
</script>
<style lang="less">
.select-d {
  .el-input__inner {
    border-radius: 0;
    height: 30px;
    line-height: 30px;
  }
  .el-button--goon {
    margin-top: 0;
    height: 0.4rem;
    width: 0.4rem;
  }
}
.table {
  .el-button {
    padding: 0 5px;
  }
}
.equipDialog {
  .content {
    width: 100%;
    height: 280px;
    .equipTable {
      .el-table tr {
        border-color: #374569;
        background-color: #10182b;
      }
      .el-table__body tr {
        height: 0.5rem;
      }
      .el-table__body tr:hover {
        box-shadow: none;
      }
      .el-table th,
      .el-table tr {
        border-color: #374569 !important;
      }
      .el-table {
        border: 1px solid #374569;
        border-bottom: none;
      }
      .el-table th.is-leaf{
        font-size: 15px;
      }
    }
  }
}
</style>
<style lang='less' scoped>
.device-box {
  height: 100%;
  .select-d {
    width: 100%;
    margin-top: 5px;
    margin-bottom: 10px;
    .searchInp {
      width: 250px;
      display: flex;
      .but {
        align-self: flex-start;
      }
    }
  }
  // 表格
  .table {
    .el-button--iAduit,
    .el-button--iQidong,
    .el-button--iStop,
    .el-button--iRizhi,
    .el-button--iDetial {
      background: transparent;
      border-color: transparent;
    }
    .el-button--iDetial {
      color: #09b2b0;
    }
    .el-button--iQidong {
      color: #e97830;
      font-size: 20px !important;
    }
    .el-button--iStop {
      color: #cb2f33;
    }
    .el-button--iAduit {
      color: #5180fb;
    }
    .el-button--iRizhi {
      color: #4ae7ec;
    }
  }
  // 详情弹框
  .equipDialog {
    .content {
      width: 90%;
      margin: 0 auto;
      .wrap1 {
        width: 100%;
        margin-bottom: 15px;
        span {
          font-size: 16px;
          color: #fff;
          margin-right: 15px;
        }
        input {
          width: 85%;
          background-color: #172449;
          border: 1px solid #172449;
          height: 27px;
          line-height: 27px;
          border-radius: 3px;
          color: #4967a1;
          padding: 0 10px;
        }
      }
      .wrap2 {
        width: 100%;
        margin-bottom: 15px;
        span {
          font-size: 16px;
          color: #fff;
          margin-right: 15px;
        }
        .ip {
          margin-left: 28px;
        }
        input {
          width: 35%;
          background-color: #172449;
          border: 1px solid #172449;
          height: 27px;
          line-height: 27px;
          border-radius: 3px;
          color: #4967a1;
          padding: 0 10px;
        }
      }
      // 表格
      .equipTable {
        width: 98%;
      }
    }
  }
}
</style>
